<template>
   <div class="col-12 col-md-12"> 
        <ul class="list-unstyled"> 
         <router-link class="nav-link my-nav-link" v-for="(item, index) in tableData" :key='index'  :to="'/newsInfo/'+item.id" >
            <li class="media">
              <img
                :src="item.image"
                style="width: 50px; height: 50px"
                class="mr-3"
                :alt="item.title"
              />
              <div class="media-body">
                <h5 class="mt-0 mb-1">{{item.title}}</h5>
                {{item.summary}} 
              </div>
            </li>
          </router-link>   
        </ul>  
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.currentPage"
      :page-sizes="[10,20,30,40,50]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination> 
  </div> 
</template>
<script>
import store from "@/store";
import { articleList } from "@/api/service";
import { fieldMap, publicFilter } from "@/utils/showMap";
export default {
  props: ["param"],
  data() {
    return {
      pageInfo: {
        currentPage: 1,
        size: 20,
        total: 0,
      }, 
      tableData: [],
    };
  },
  filters: {
    status: (value) => publicFilter(fieldMap.article_status, value.toString()),
    category: (value) =>
      publicFilter(fieldMap.article_category, value.toString()),
  },
  mounted() {
    // console.log(this.param);
    this.search(); 
  },
  methods: {
    search() {
      articleList({
        page: this.pageInfo.currentPage,
        size: this.pageInfo.size,
        ...this.param
      }).then((res) => {
        this.tableData = res.data.content;
        this.pageInfo.currentPage = res.data.page;
        this.pageInfo.total = res.data.total;
        this.pageInfo.size = res.data.size;
      });
    },

   handleSizeChange(val) {
       this.pageInfo.size=val;
      this.search();
      },
      handleCurrentChange(val) {
         this.pageInfo.currentPage=val;
        this.search();
      }
  },
};
</script>
<style lang="less" scoped>
.list-unstyled{text-align:left;a{color:#000;}}
.pagination {
  margin: 15px auto;
}
</style>
